const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// const WebpackCdnPlugin = require('webpack-cdn-plugin');
// const DynamicCdnWebpackPlugin = require('dynamic-cdn-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;


module.exports = (env, argv) => {
    console.log('env:', env, 'argv:', argv);
    // env: { production: true }
    // argv: {
    //   _: [],
    //   cache: null,
    //   bail: null,
    //   profile: null,
    //   color: { level: 3, hasBasic: true, has256: true, has16m: true },
    //   colors: { level: 3, hasBasic: true, has256: true, has16m: true },
    //   config: 'webpack.config.js',
    //   env: { production: true },
    //   'info-verbosity': 'info',
    //   infoVerbosity: 'info',
    //   '$0': 'node_modules\\webpack\\bin\\webpack.js'
    // let cdn_modules = [
    //     {name: 'react', var: 'React', path: `umd/react.${argv.mode}.min.js`},
    //     {name: 'react', var: 'React', path: `umd/react-dom.${argv.mode}.min.js`}
    // ];
    // mode: "production",
    // noinspection UnnecessaryLocalVariableJS
    env.production = env.production ? env.production : undefined;
    return {
        entry: './src/index.tsx',

        // Enable sourcemaps for debugging webpack's output.
        // devtool: env.production ? 'source-map' : 'eval',
        devtool: env.production ? 'source-map' : 'source-map',

        resolve: {
            // Add '.ts' and '.tsx' as resolvable extensions.
            extensions: [".ts", ".tsx", '.js']
        },
        devServer: {
            port: 3003,
            // 声明为热替换
            hot: true,
            // 第一次打包时打开浏览器
            // contentBase: path.join(__dirname, 'dist'),
            // Enable gzip compression for everything served:
            compress: true,
            open: 'chrome',
            // ExampleTypeScript browser application name is platform dependent.
            // Don't hard code it in reusable modules. For example,
            // 'Chrome' is 'Google Chrome' on macOS,
            // 'google-chrome' on Linux and 'chrome' on Windows.
        },
        module: {
            rules: [
                {
                    test: /\.ts(x?)$/,
                    exclude: /node_modules/,
                    use: [
                        {
                            loader: "ts-loader"
                        }
                    ]
                },
                // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
                {
                    enforce: "pre",
                    test: /\.js$/,
                    loader: "source-map-loader"
                },
            ],
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: './template/' + argv.mode + '/index.html', // 添加模版文件
                favicon: './favicon.ico'
            }),
            // new DynamicCdnWebpackPlugin(),
            new BundleAnalyzerPlugin({
                analyzerMode: 'json',
                generateStatsFile: true,
            })
            // new WebpackCdnPlugin(
            //     {
            //         modules: cdn_modules
            //     }
            // ),
        ],
        // When importing a module whose path matches one of the following, just
        // assume a corresponding global variable exists and use that instead.
        // This is important because it allows us to avoid bundling all of our
        // dependencies, which allows browsers to cache those libraries between builds.
        externals: {
            "react": "React",
            "react-dom": "ReactDOM",
            "react-router-dom": "ReactRouterDOM",
        },

        output: {
            filename: '[name].bundle.js',
            path: path.resolve(__dirname, 'dist'),
        },
        optimization: {
            splitChunks: {
                chunks: 'all',
            }
        }
    };

};